<template>
	<jk-view :loading="showLoading">
		<jk-operation-card class="margin-bottom-10 margin-top-10 width-100-percent fixed-operation-bar">
			<div class="flex-between-center">
				<div>
					<span class="el-icon-star-off item-gap"></span>
					<span>{{ ruleForm.code }}</span>
					<el-tag v-show="ruleForm.id" size="mini" type="info" class="margin-left-10">
						<jk-common-status :status="ruleForm.auditState"></jk-common-status>
					</el-tag>
				</div>
				<div class="flex-end-center">
					<el-button type="info" plain icon="el-icon-back" size="small" class="item-gap" @click="onJumpList">返回列表</el-button>
					<jk-save-button v-if="pageType === 'add'" :loading="saveBtnLoading" class="item-gap" :permission-prefix="prefix" @click="onConfirmBtn(0)"></jk-save-button>
					<jk-update-button v-if="pageType === 'edit'" :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" :permission-prefix="prefix" :loading="saveBtnLoading" class="item-gap" @click="onConfirmBtn(1)"></jk-update-button>
					<div v-if="pageType === 'detail'" class="item-gap"><jk-button :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" type="primary" icon="el-icon-edit" size="small" @click="onEditBtn">编辑</jk-button></div>
					<div v-if="pageType !== 'detail'" class="item-gap"><jk-button :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" :loading="saveAndEnableBtnLoading" type="primary" icon="el-icon-document-checked" size="small" @click="onConfirmBtn(2)">{{ ruleForm.id ? '更新' : '保存' }}并启用</jk-button></div>
					<jk-button v-if="(pageType === 'detail' || pageType === 'edit') && ruleForm.auditState === 1" :loading="auditStateLoading" :type="ruleForm.auditState === 1 ? 'warning' : 'success'" class="pointer item-gap" :icon="ruleForm.auditState ? 'el-icon-video-pause' : 'el-icon-video-play'" size="small" @click="onAuditStateChange">{{ ruleForm.auditState === 0 ? '启用': '停用' }}</jk-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card>
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" :hide-required-asterisk="pageType === 'detail'" label-width="120px" :show-message="false">
				<div ref="box3">
					<div class="flex-between-center margin-bottom-10">
						<el-tag type="primary" effect="plain">
							<span class="el-icon-tickets item-gap"></span>
							<span>基本信息</span>
						</el-tag>
						<!--<el-button size="mini" icon="el-icon-question" style="font-size: 13px;">
							<span>去修改任务</span>
						</el-button>-->
					</div>
					<el-row ref="box1">
						<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="日期" prop="specDate">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.specDate }}</span>
								<el-date-picker v-else v-model="ruleForm.specDate" clearable type="date" style="width: 100%;" value-format="yyyy-MM-dd" placeholder="日期" />
							</el-form-item>
						</el-col>
						<!--<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="区域" prop="specEmpId">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.specDate }}</span>
								<jk-select v-else v-model="ruleForm.workshopId" :option-list="[]" size="medium" class="width-100-percent" placement="区域" clearable />
							</el-form-item>
						</el-col>-->
						<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="班次" prop="specEmpId">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.specDate }}</span>
								<jk-select v-else v-model="ruleForm.workshopId" :option-list="[]" size="medium" class="width-100-percent" placement="班次" clearable />
							</el-form-item>
						</el-col>
						<!--<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
							<el-form-item class="margin-bottom-10" label="统计员" prop="specEmpId">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.specEmpName }}</span>
								<remote-search-emp-input
									v-else
									placeholder="统计员"
									only-key="specEmpId"
									query-name="specEmpName"
									:form-data="ruleForm"
									@on-select="onSelectEmpChange"
								></remote-search-emp-input>
							</el-form-item>
						</el-col>-->
						<el-col :span="24">
							<el-form-item class="margin-bottom-10" label="备注">
								<el-input v-model="ruleForm.remark" type="textarea" :rows="1" placeholder="" />
							</el-form-item>
						</el-col>
					</el-row>
				</div>
				<div ref="box2">
					<el-tag type="primary" effect="plain" class="margin-bottom-10">
						<span class="el-icon-paperclip item-gap"></span>
						<span>考勤明细</span>
					</el-tag>
					<el-row :gutter="14">
						<el-col :span="12" class="margin-bottom-20">
							<div class="box-title">未打卡</div>
							<jk-table ref="jkTable" :span-method="mergeColMethod" border :data="tableData1" :height="300">
								<vxe-column title="岗位" align="left" field="postName" :width="80" />
								<vxe-table-column field="empList" title="人员" align="left" :min-width="80">
									<template slot-scope="scope">
										<div class="flex-start-center">
											<el-tag effect="plain" type="info">张三</el-tag>
										</div>
									</template>
								</vxe-table-column>
								<vxe-column title="上班打卡时间" align="left" field="machineCode" :min-width="100" />
								<vxe-column title="下班打卡时间" align="left" field="machineCode" :min-width="100" />
								<vxe-column title="操作" width="60" align="center">
									<template slot-scope="scope">
										<el-button size="mini" icon="el-icon-delete" type="text" @click="ruleForm.machineChangeList.splice(scope.rowIndex, 1)"></el-button>
									</template>
								</vxe-column>
							</jk-table>
						</el-col>
						<el-col :span="12" class="margin-bottom-20">
							<div class="box-title">请假</div>
							<jk-table ref="jkTable" :span-method="mergeColMethod" border :data="tableData1" :height="300">
								<vxe-column title="岗位" align="left" field="postName" :width="80" />
								<vxe-table-column field="empList" title="人员" align="left" :min-width="80">
									<template slot-scope="scope">
										<div class="flex-start-center">
											<el-tag effect="plain" type="info">张三</el-tag>
										</div>
									</template>
								</vxe-table-column>
								<vxe-column title="请假原因" align="left" field="machineCode" :width="150">
									<template slot-scope="scope">
										<div class="flex-start-center">
											<jk-select v-model="scope.row.aaa"></jk-select>
										</div>
									</template>
								</vxe-column>
								<vxe-column title="请假时间" align="left" field="machineCode" :min-width="150">
									<template slot-scope="scope">
										<div class="flex-start-center">
											<jk-date-picker v-model="scope.row.aaa" type="datetimerange"></jk-date-picker>
										</div>
									</template>
								</vxe-column>
								<vxe-column title="操作" width="60" align="center">
									<template slot-scope="scope">
										<el-button size="mini" icon="el-icon-delete" type="text" @click="ruleForm.machineChangeList.splice(scope.rowIndex, 1)"></el-button>
									</template>
								</vxe-column>
							</jk-table>
						</el-col>
						<el-col :span="12" class="margin-bottom-20">
							<div class="box-title">迟到早退</div>
							<jk-table ref="jkTable" :span-method="mergeColMethod" border :data="tableData1" :height="300">
								<vxe-column title="岗位" align="left" field="postName" :width="80" />
								<vxe-table-column field="empList" title="人员" align="left" :min-width="80">
									<template slot-scope="scope">
										<div class="flex-start-center">
											<el-tag effect="plain" type="info">张三</el-tag>
										</div>
									</template>
								</vxe-table-column>
								<vxe-column title="上班打卡时间" align="left" field="machineCode" :width="100" />
								<vxe-column title="下班打卡时间" align="left" field="machineCode" :width="100" />
								<vxe-column title="迟到原因" align="left" field="machineCode" :width="150">
									<template slot-scope="scope">
										<div class="flex-start-center">
											<jk-select v-model="scope.row.aaa"></jk-select>
										</div>
									</template>
								</vxe-column>
								<vxe-column title="早退原因" align="left" field="machineCode" :width="150">
									<template slot-scope="scope">
										<div class="flex-start-center">
											<jk-select v-model="scope.row.aaa"></jk-select>
										</div>
									</template>
								</vxe-column>
								<vxe-column title="操作" width="60" align="center">
									<template slot-scope="scope">
										<el-button size="mini" icon="el-icon-delete" type="text" @click="ruleForm.machineChangeList.splice(scope.rowIndex, 1)"></el-button>
									</template>
								</vxe-column>
							</jk-table>
						</el-col>
						<!--<el-col :span="12" class="margin-bottom-20">
							<div class="box-title">长白班（后纺才统计）</div>
							<jk-table ref="jkTable" :span-method="mergeColMethod" border :data="tableData1" :height="300">
								<vxe-column title="岗位" align="left" field="postName" :width="80" />
								<vxe-table-column field="empList" title="人员" align="left" :min-width="80">
									<template slot-scope="scope">
										<div class="flex-start-center">
											<el-tag effect="plain" type="info">张三</el-tag>
										</div>
									</template>
								</vxe-table-column>
								<vxe-column title="上班打卡时间" align="left" field="machineCode" :width="100" />
								<vxe-column title="下班打卡时间" align="left" field="machineCode" :width="100" />
								<vxe-column title="迟到原因" align="left" field="machineCode" :width="150">
									<template slot-scope="scope">
										<div class="flex-start-center">
											<jk-select v-model="scope.row.aaa"></jk-select>
										</div>
									</template>
								</vxe-column>
								<vxe-column title="早退原因" align="left" field="machineCode" :width="150">
									<template slot-scope="scope">
										<div class="flex-start-center">
											<jk-select v-model="scope.row.aaa"></jk-select>
										</div>
									</template>
								</vxe-column>
								<vxe-column title="操作" width="60" align="center">
									<template slot-scope="scope">
										<el-button size="mini" icon="el-icon-delete" type="text" @click="ruleForm.machineChangeList.splice(scope.rowIndex, 1)"></el-button>
									</template>
								</vxe-column>
							</jk-table>
						</el-col>-->
					</el-row>
				</div>
			</el-form>
		</jk-card>
	</jk-view>
</template>

<script>
    import technologyOrder from './form-box-mixin';
    export default {
        name: 'TechnologyOrder',
        mixins: [technologyOrder],
        data() {
            return {};
        },
        methods: {

        },
        mounted() {
            this.getDependentData();
        }
    };
</script>
<style scoped lang="scss">
    .box-title {
        height: 38px;
        font-size: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #2d8cf0;
        color: #fff;
        border: solid 1px #2d8cf0;
        border-bottom: none;
        margin-bottom: -1px;
        border-radius: 4px 4px 0 0;
    }
</style>
